<!-- 公共商品组件 -->
<template>
  <view v-if="goods" class="container">
    <view
      v-if="styleType === StoreHomeRecommendStyleTypeEnum.VERTICAL"
      class="product-vertical"
      @click="handleToGoodsDetail(goods!.productLibId)"
    >
      <view style="position: relative">
        <TImage width="340rpx" height="340rpx" :src="goods.imageUrl" borderRadius="4px 4px 0 0" />
        <view
          v-if="goods.memberTag === MENBERTAG_ENUM.YES_MEMBER"
          class="member-tag"
          style="background: linear-gradient(90deg, #fdedc7 0.12%, #f7d9a2 100%)"
        >
          会长专享
        </view>
        <view v-if="goods.shopName" class="shop-name" style="background: rgba(0, 0, 0, 0.5)">
          {{ goods.shopName }}
        </view>
      </view>
      <view class="product-info">
        <view class="product-name">
          <text>{{ goods.productName }}</text>
        </view>
        <CustomTag outlined :label="goods.memberDiscountTagName"></CustomTag>
        <view class="product-info__bottom">
          <Price
            :minPrice="goods.price"
            :maxPrice="goods.price"
            :priceShowType="goods.priceShowType"
            priceBoxStyle="display: flex; justify-content: center;margin-top: 8rpx; font-size: 28rpx;color: #ea5e0e;"
          />
          <view class="buy-btn">
            <text>领取</text>
          </view>
        </view>
      </view>
    </view>
    <view
      v-else-if="StoreHomeRecommendStyleTypeEnum.HORIZONTAL"
      :key="goods.productLibId"
      class="product-horizontal"
      style="box-shadow: 0px 2px 12px 0px rgba(150, 151, 153, 0.2)"
      @click="handleToGoodsDetail(goods.productLibId)"
    >
      <TImage :src="goods.imageUrl" width="264rpx" height="264rpx" />
      <view style="margin-top: 16rpx; padding: 0 16rpx">
        <view style="height: 72rpx">
          <view class="text-overflow-2 product-name">
            <text>{{ goods.productName }}</text>
          </view>
        </view>
        <Price
          :minPrice="goods.price"
          :maxPrice="goods.price"
          :priceShowType="goods.priceShowType"
          priceBoxStyle="display: flex; justify-content: center;margin-top: 8rpx; font-size: 28rpx;color: #ea5e0e;"
        />
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
  import { StoreHomeRecommendStyleTypeEnum } from '@/enums/productEnum';
  import { type IGoods, MENBERTAG_ENUM } from './Igoods';
  import { formatMoney } from '@/utils/number';
  import type { PropType } from 'vue';
  import TImage from '@/components/TImage/index.vue';
  import CustomTag from '../CustomTag/index.vue';
  import { toHuibangCloud } from '@/utils/dynamicConfig';
  import Price from '@/components/Price/index.vue';

  defineProps({
    goods: Object as PropType<IGoods>,
    styleType: {
      type: Number as PropType<StoreHomeRecommendStyleTypeEnum>,
      default: StoreHomeRecommendStyleTypeEnum.VERTICAL,
    },
  });

  const handleToGoodsDetail = (productLibId: number) => {
    // 跳转商城的商品详情
    toHuibangCloud('goodsDetail', { goodsId: productLibId });
  };
</script>
<style lang="scss" scoped>
  .container {
    box-sizing: border-box;
    .product-vertical {
      background-color: #f7f8fa;
      border-radius: 16rpx;
      border: 1px solid #f2f3f5;
      .member-tag {
        position: absolute;
        left: 0;
        top: 0;
        width: 160rpx;
        height: 56rpx;
        background-color: #f7d9a2;
        border-bottom-right-radius: 24rpx;
        border-top-left-radius: 4rpx;
        color: #ea5e0e;
        font-size: 28rpx;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .shop-name {
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        height: 64rpx;
        color: #fff;
        font-size: 24rpx;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .product-info {
        padding: 16rpx;
        width: 100%;
        box-sizing: border-box;
        &__bottom {
          display: flex;
          align-items: center;
          justify-content: space-between;
          margin-top: 16rpx;
          .price {
            font-weight: 700;
            font-style: normal;
            color: #333;
            font-size: 28rpx;
          }
        }
      }
    }

    .product-horizontal {
      background-color: #fff;
      width: 264rpx;
      margin-left: 24rpx;
      height: 400rpx;
      .price {
        text-align: center;
        margin-top: 8rpx;
        font-size: 28rpx;
        color: #ea5e0e;
      }
    }

    .product-name {
      font-style: normal;
      font-size: 28rpx;
      color: #333;
    }

    .buy-btn {
      color: #ea5e0e;
      font-size: 24rpx;
      font-weight: bolder;
      background: linear-gradient(90deg, #fdedc7 0.12%, #f7d9a2 100%);
      padding: 8rpx 16rpx;
      border-radius: 24rpx;
    }
  }
</style>
